<template>
	<view class="wrap bg-white" style="height: 85vh;">
		<js-error mode="bottom" ref="jsError" @update:errorClose="onErrorClose"></js-error>

		<u-form class="form bg-white" :model="model" ref="uForm" label-position="left">
			<u-form-item label="客户:" prop="cusName" label-width="200"  required>
				<u-input placeholder="请选择" v-model="model.cusName" :disabled="true" di maxlength="200"  type="select" @click="cusNameSelect()" ></u-input>
			</u-form-item>
			<u-form-item :label="type === 'fa' ? '产品发出' : '产品退回'" prop="barCode" label-width="0" label-position="top">
				<u-input placeholder="请扫描识别 " v-model="barCode" type="input"  di height="80" :focus="focus" @input="confirmInput"></u-input>
				<!-- 此处插槽 -->
				<template #public>
					<view class="flex align-center justify-end margin-top">
						<view class="cuIcon-scan text-sl" @click="search"></view>
					</view>
				</template>
			</u-form-item>
			<u-form-item label="产品名称:" prop="cinvname" label-width="200">
				<u-input placeholder=" " v-model="model.cinvname" type="text" :disabled="true"></u-input>
			</u-form-item>
			<u-form-item label="产品编码:" prop="cinvcode" label-width="200">
				<u-input placeholder=" " v-model="model.cinvCode" type="text" :disabled="true"></u-input>
			</u-form-item>
			<view class="cu-form-group flex justify-end margin-top">
				<button class="cu-btn lines-green shadow-blur" @tap="detailCache()">
					明细 {{ cacheList.length }}
				</button>
			</view>
		</u-form>
	<!-- <view style="height: 200rpx;"></view> -->
	<view class="footer" >
		<view style="border-bottom:1px solid #eee ;padding: 20rpx;display: flex;align-items: center;justify-content: space-between;">
			<view style="display: flex;align-items: center;" >
				<view style="width: 200rpx;">{{  type === 'fa' ? '本次发货总数：' : '本次退货总数：'}}</view>
				<view style="flex: 1;" class="flex align-center"> 
					<view class="text-xxl text-bold text-red margin-left margin-right">{{ xiangNums }}</view>
					<view>箱</view>
					<view class="text-xxl text-bold text-red margin-left  margin-right">{{ guanNums }}</view>
					<view>罐</view>
				</view>
			</view>
		</view>
		<view style=" display: flex;justify-content: space-around;padding: 20rpx ;">
			<button class="cu-btn lines-default shadow-blur" @tap="resetForm()">
				重置
			</button>
			<button class="cu-btn lines-red shadow-blur" @tap="backBox()">
				{{ type === 'fa' ? '退' : '移出箱子' }}
			</button>
			<button style="margin: 0 10px;" class="cu-btn lines-green shadow-blur" @tap="submit()">
				<!-- 发货 -->
				 {{ type === 'fa' ? '发货' : '退货' }}
			</button>
			
			
		</view>
	</view>
	<movable-area class="movable-area1">
		<movable-view class="movable-view" :x="x" :y="y" direction="all">
			<view @click="backInv" class="custom-style" style="width: 90px; height: 70px; color: #fff; border-radius: 10rpx;">
				<view style="font-size: 16px;display: flex; flex-direction: column;text-align: center;">
					<text class="cuIcon-camera text-xxls text-blue"></text>
					<view class="text-blue">条码识别</view>
				</view>
			</view>
			<!-- <button size="mini" >
				
			</button> -->
		</movable-view>
	</movable-area>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	import commonEditMixin from '@/libs/mixin/commonEditMixin.js';
	export default {
		mixins: [commonEditMixin],
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					// hour: true,
					// minute: true,
					// second: true
				},
				model: {
					company:{},
					basVen:{},
				},
				barCode: '',
				focus: false,
				pickerTime: false, //控制日期显示
				isBack: false,
				type:'fa',
				cacheList: [],
				cacheData:{},
				detailList: [],
				x: 640, //x坐标
				y: 700, //y坐标
				xiangNums : 0,
				guanNums: 0,
				heNums: 0,
				pingNums: 0,
				gcodes:'',
				xcodes:'',
				isSubmitting: false,
			}
		},
		onLoad(params) {
			this.type = params.type
			if(this.type === "tui"){
				uni.setNavigationBarTitle({
					title:'市代发货(退)'
				})
			}
			uni.$on('cusNamesObjs', (data,index) => {
				this.model.cusName = data[0]['name']
				this.model.cusCode = data[0]['id']
				this.$forceUpdate()
			})
			const bizKey = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
			this.bizKey = bizKey
			this.model.bizKey = bizKey
		},
		onShow() {},
		onReady() { },
		methods: {
			backBox(){
				let content = ''
				if(this.type === 'fa'){
					content = '当前产品正在进行发货，是否取消发货！'
				}else if(this.type === 'tui'){
					content = '当前产品正在进行退货，是否取消退货！'
				}
				uni.showModal({
					title: '温馨提示',
					content: content,
					confirmColor: '#F54E40',
					success: async (res) => {
						if (!res.confirm) {
							return false;
						}
						this.detailCache()
						
					}
				})
			},
			detailCache(){
				// 
				var _this = this;
				uni.navigateTo({
					url: '/pages/zgz/sdfh/cacheList',
					events: {
						Filter(data) {
							console.log(data,'data')
							_this.cacheList = data.data;
							_this.xiangNums = data.xiangNums;
							_this.guanNums = data.guanNums;
							_this.gcodes = data.gcodes;
							_this.xcodes = data.xcodes;							
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						//res.eventChannel.emit('initfilter', that.queryData)
						_this.cacheData = {
							data:_this.cacheList,
							xiangNums:_this.xiangNums,
							guanNums:_this.guanNums,
							gcodes:_this.gcodes,
							xcodes:_this.xcodes,
							cusCode:_this.model.cusCode,
							bizKey:_this.bizKey 
						}
						console.log(_this.cacheData,'this.cacheData')
						res.eventChannel.emit('initfilter', _this.cacheData);
					}
				})
			},
			backInv(back){
				console.log(back)
				if(back == "true"){
					this.isBack = true
				}
				if(this.vuex_config.deviceType === this.vuex_config.deviceTypeAPP){
					
					this.search()
				}else if(this.vuex_config.deviceType === this.vuex_config.deviceTypePDA){
					console.log(456)
					this.handleFocus()
				}
			},
			resetForm(){
				this.model = {},
				this.barcode = '',
				this.gcodes = '',
				this.xcodes = '',
				this.cacheList = [],
				this.xiangNums = 0,
				this.heNums = 0,
				this.guanNums = 0
				const bizKey = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
				this.bizKey = bizKey
						// xiangNums : 0,
				// heNums: 0,
				// pingNums: 0,
				// 
				// this.handleFocus()
			},
			cusNameSelect() {
				const that = this
				that.resetForm()
				if(!!this.model.cus){
					uni.showModal({
						title: '温馨提示',
						content: '更换客户信息，产品信息会清空，请谨慎操作！',
						confirmColor: '#F54E40',
						success: (res) => {
							if (!res.confirm) {
								return false;
							}
							uni.navigateTo({
								url: '/pages/zgz/components/cusNameSelect',
								events: {
									Filter(data) {
							
									}
								},
								success: function(res) {
									// 通过eventChannel向被打开页面传送数据
									//res.eventChannel.emit('initfilter', that.queryData)
								}
							})
							
							that.$forceUpdate()
							
						}
					})
				}else{
					uni.navigateTo({
						url: '/pages/zgz/components/cusNameSelect',
						events: {
							Filter(data) {
					
							}
						},
						success: function(res) {
							
						}
					})
					that.$forceUpdate()
				}			
			},
			submit() {
				if (this.isSubmitting) {
				  return;
				} else {
				  this.isSubmitting = true;
				  if (this.model.cusName == null || this.model.cusName == '') {
				    this.$refs.jsError.showError("", '请选择门店', "error");
				    this.isSubmitting = false;
				    return;
				  }
				  try {
					console.log('isSubmitting',this.isSubmitting)
					if(this.type === 'fa'){
						this.model.bizType = this.vuex_config.bizType_Fa
					}else if(this.type === 'tui'){
						this.model.bizType = this.vuex_config.bizType_Tui
					}
					// gcodes:'',
					// xcodes:'',
					this.model.gcodes = this.gcodes
					this.model.xcodes = this.xcodes
					this.model.bizKey = this.bizKey
					this.$u.api.zgz.commit(this.model).then(res => {
						if (res.result == 'true') {
							this.$u.toast(res.message);
							this.resetForm()
						}else{
							this.$refs.jsError.showError('',res.message,'error');
						}
					});
					
				  } catch (error) {
				    this.$u.toast(error.message);
				  } finally {
				    this.isSubmitting = false;
				  }
				}
			},
			onErrorClose(result) {
				console.log('result',result)
			//   获取focus 焦点
				this.focus = result;
				setTimeout(() => {
					this.barCode = ''
					if(this.vuex_config.deviceType === this.vuex_config.deviceTypePDA){
						this.focus = true;
					}
					
				}, 100);
			 
			},
		}
	}
</script>
<style lang="scss" scoped>
	$all_width: 96rpx;
	$all_height: 96rpx;
	.movable-area1 {
		z-index: 888;
		height: 97vh;
		width: 650rpx;
		position: fixed;
		right: $all_width;
		top: -($all_height + 100rpx);
		pointer-events: none; //此处要加，鼠标事件可以渗透
		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件
			image {
				width: $all_width;
				height: $all_height;
			}
		}
	}
	.wrap{
		// height: 100vh;
	}
	.btn-plus {
		position: fixed;
		bottom: 260rpx;
		right: 40rpx;
		z-index: 2;
		opacity: 0.6;
	}

	.btn-plus:hover {
		opacity: 1;
	}
	.text-xxls{
		font-size:60rpx;
	}
	.add {
		position: absolute;
		right: 130rpx;
		top: 0;
		margin-right: 0;
	}

	.upload {
		position: absolute;
		right: 65rpx;
		top: 0;
		margin-right: 0;
	}

	.rights {
		position: absolute;
		/* display: inline-block; */
		right: 0;
		top: 0;
		margin-right: 0;
		/* width: 100%; */

	}

	.cu-bar {
		min-height: 80px;
	}

	.cu-btn {
		font-size: 16px;
		height: 40px;
	}

	.foot {
		background: #fff;
	}

	.cu-item {
		flex-wrap: wrap;
		padding: 8px 15px !important;
	}

	.title {
		width: 230rpx;
	}

	.cu-modal-slot {
		margin: 42rpx 32rpx 20rpx 32rpx;
		height: 100vh;
		position: relative;
	}

	.cu-modal-header {
		font-size: 38rpx;
		color: #3d3d3d;
		line-height: 40rpx;
		text-align: left;
		font-weight: 500;
	}

	.button {
		font-size: 32rpx;
		color: #666666;
		line-height: 40rpx;
		padding: 12rpx 40rpx;
		margin-bottom: 20rpx;
		background: #e2e2e2;
		border-radius: 180rpx;
	}

	.button:hover {
		background: #3e97b0;
		color: #ffffff;
	}

	.cu-modal-search-title {
		margin: 32rpx 0rpx 20rpx 0rpx;
		text-align: left;
		font-size: 32rpx;
		color: #999999;
		line-height: 40rpx;
	}

	.cu-dialog {
		background: #ffffff;
	}
	

	.cu-modal-footer {
		padding: 32rpx 32rpx !important;
		width: 100% ;
		.cu-btn {
			width: 50%;
		}
		
	}

	.bg-confirm {
		background: #3e97b0;
		color: #ffffff;
	}
	
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #fff;z-index: 999;
		border-top: 1px solid #eee;
	}
	.text-sl{
		font-size: 40px !important;
	}
	.cu-btn{
		padding: 0 60rpx !important;
	}
</style>